<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>{$Think.config.site.title} - 主页</title>
    <meta name="keywords" content="{$Think.config.site.keywords}">
    <meta name="description" content="{$Think.config.site.description}">
    <link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/style.css?v=4.1.0" rel="stylesheet">
</head>
<style type="text/css">
.row1{ margin-top: 135px; }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row"><style>.layer-date{ width: 240px; padding:0px 12px; position: relative; top:-9px;}</style>
        <div class="col-sm-12">
            <p id="buttons">
                　{:lang('请选择要查询的日期')}　
                <button type="button" {if condition="$time eq 'thismonth'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="thismonth">{:lang('本月')}</button>　
                <button type="button" {if condition="$time eq 'thisweek'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="thisweek">{:lang('本周')}</button>　
                <button type="button" {if condition="$time eq 'today'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="today">{:lang('今天')}</button>　
                <button type="button" {if condition="$time eq 'yesterday'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="yesterday">{:lang('昨天')}</button>　
                <button type="button" {if condition="$time eq 'lastmonth'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="lastmonth">{:lang('上月')}</button>　
                <button type="button" {if condition="$time eq 'thisyear'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="thisyear">{:lang('今年')}</button>　
                <button type="button" {if condition="$time eq 'lastyear'"} class="btn btn-primary" {else /}  class="btn btn-outline btn-primary"  {/if} data-id="lastyear">{:lang('去年')}</button>
                <form action="" id="myForm" method="post" style="">
                    
                    <input type="hidden" value="" id="time" name="time">
                </form>
            </p>
            <p>&nbsp;</p>
            <form method="post" action="" id="custom" style="margin-top:10px;" >
                　　<input class="form-control layer-date" name="starttime" id="kaishi" value="{$kaishitime ?? ''}" placeholder="{:lang('开始时间')}" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">　<input class="form-control layer-date" value="{$jieshutime ?? ''}" name="endtime" id="jieshu" autocomplete="off" placeholder="{:lang('结束时间')}" autocomplete="off" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">　<button type="button" class="btn btn-outline btn-primary" id="search" >{:lang('提交')}</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div>
                 <div class="flot-chart">
                    <div class="flot-chart-content"  style=" height:350px; " id="openOrder" ></div>
                 </div>
            </div>
        </div>
    </div>
    <div class="row row1">
        <div class="col-sm-12">
            <div>
                <div class="flot-chart">
                    <div class="float-chart-content" style="height: 350px;" id='openAccount'></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row row1">
        <div class="col-sm-12">
            <div>
                <div class="flot-chart">
                    <div class="float-chart-content" style="height: 350px;" id='sellers'></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row row1">
        <div class="col-sm-12">
            <div>
                <div class="flot-chart">
                    <div class="float-chart-content" style="height: 350px;" id='refund'></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row row1">
        <div class="col-sm-12">
            <div>
                <div class="flot-chart">
                    <div class="float-chart-content" style="height: 350px;" id='recharge'></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row row1">
        <div class="col-sm-12">
            <div>
                <div class="flot-chart">
                    <div class="float-chart-content" style="height: 350px;" id='management'></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row row1">
        <div class="col-sm-12">
            <div>
                <div class="flot-chart">
                    <div class="float-chart-content" style="height: 350px;" id='users'></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
    <script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>

    <script type="text/javascript">
    $(function(){
        $("#buttons button").click(function(){
            $("#buttons button").removeClass('btn btn-primary');
            $("#buttons button").addClass('btn btn-outline btn-primary');
            $(this).addClass('btn btn-primary');
            var time = $(this).data("id");
            //alert(a);
            $('#time').val(time);
            $('#myForm').submit();
        });

        $('#search').click(function(){
            var strat = $('#kaishi').val();
            var end = $('#jieshu').val();
            if(strat==''){
                $('#kaishi').attr('placeholder',"{:lang('请选择开始时间')}");
                $('#kaishi').focus();
                return false;
            }else if(end==''){
               $('#jieshu').attr('placeholder',"{:lang('请选择结束时间')}");
               $('#jieshu').focus();
               return false;
            }

            $('#custom').submit();

        });
    });

</script>
    <script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.6"></script>
    <!-- ECharts -->
    <script src="{$Think.config.site.resource_url}js/plugins/echarts/echarts-all.js"></script>
    <!-- 自定义js -->
    <script src="{$Think.config.site.resource_url}js/content.js?v=1.0.0"></script>
    <!-- ECharts demo data -->
    <script src="{$Think.config.site.resource_url}js/demo/echarts-demo.js"></script>
    <script type="text/javascript">
    var  openOrder = echarts.init(document.getElementById('openOrder'));//开户订单
    var  openAccount = echarts.init(document.getElementById('openAccount'));//开户数
    var sellers = echarts.init(document.getElementById('sellers'));//运营商商户增长趋势
    var refund = echarts.init(document.getElementById('refund'));//用户退押金情况
    var recharge = echarts.init(document.getElementById('recharge'));//用户充值押金数
    var management = echarts.init(document.getElementById('management'));//运营商经营状况
    var users = echarts.init(document.getElementById('users'));//用户增长趋势
    //充值记录
    <?php

        if($time=='thismonth'){
            $title = lang('本月');
        }else if($time=='thisweek'){
            $title = lang('本周');
        }else if($time=='thisyear'){
            $title = lang('今年');
        }else if($time=='today'){
            $title = lang('今天');
        }else if($time=='yesterday'){
            $title = lang('昨天');
        }else if($time=='lastyear'){
            $title = lang('去年');
        }else if($time=='lastmonth'){
            $title = lang('上月');
        }else{
            $title = $time;
        }

    ?>
    option = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "{$title}{:lang('开户/续费订单')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('开户/续费订单，总金额：')}{$sumopenorder}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="openOrder" id="v"}'{$v.unit} {$unit}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:"{:lang('订单金额')}",
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#7FFFD4'}}},
            data:[{volist name="openOrder" id="v"}'{$v.amount} ', {/volist}]
        }
        
       ]
    };
    option1 = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "　　{$title}{:lang('开户数')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('开户数，总开户：')}{$countopenaccount}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="openAccount" id="v"}'{$v.unit} {$unit}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:"{:lang('开户数')}",
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#7FFFD4'}}},
            data:[{volist name="openAccount" id="v"}'{$v.account} ', {/volist}]
        }
        
       ]
    };
    option2 = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "　　{$title}{:lang('代理商商户增长趋势')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('代理商商户增长趋势，总商户数：')}{$countsellers}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="sellers" id="v"}'{$v.unit} {$unit}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:"{:lang('商户数')}",
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#7FFFD4'}}},
            data:[{volist name="sellers" id="v"}'{$v.seller} ', {/volist}]
        }
        
       ]
    };
    option3 = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "　　{$title}{:lang('用户退押金情况')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('用户退押金情况，押金退款总金额：')}{$sumrefund}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="refund" id="v"}'{$v.unit} {$unit}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:"{:lang('退押金金额')}",
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#7FFFD4'}}},
            data:[{volist name="refund" id="v"}'{$v.deposit} ', {/volist}]
        }
        
       ]
    };
    option4 = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "　　{$title}{:lang('充值押金次数')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('充值押金次数，总充值押金次数：')}{$countrecharge}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="recharge" id="v"}'{$v.unit} {$unit}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:"{:lang('充值押金次数')}",
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#7FFFD4'}}},
            data:[{volist name="recharge" id="v"}'{$v.deposit} ', {/volist}]
        }
        
       ]
    };
    option5 = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "　　{$title}{:lang('代理商经营状况')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('代理商经营状况, 总营业额:')}{$summanagement}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="management" id="v"}'{$v.unit} {$unit}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:"{:lang('营业额')}",
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#7FFFD4'}}},
            data:[{volist name="management" id="v"}'{$v.amount} ', {/volist}]
        }
        
       ]
    };
    option6 = {
    noDataLoadingOption: {
        text: "{:lang('暂无数据')}",
        effect: 'bubble',
        effectOption: {
            effect: {
                n: 0
            }
        }
    },
    title : {
        text: "　　{$title}{:lang('注册用户增长趋势')}",
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:["{$title}{:lang('注册用户增长趋势, 总用户数：')}{$countusers}"]
    },
    toolbox: {
        show : true,
        feature : {
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : [{volist name="users" id="v"}'{$v.unit} {$unit}', {/volist}]
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:"{:lang('注册用户数')}",
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default',color:'#7FFFD4'}}},
            data:[{volist name="users" id="v"}'{$v.total} ', {/volist}]
        }
        
       ]
    };
    openOrder.setOption(option);
    openAccount.setOption(option1);
    sellers.setOption(option2);
    refund.setOption(option3);
    recharge.setOption(option4);
    management.setOption(option5);
    users.setOption(option6);
</script>
<script src="{$Think.config.site.resource_url}js/plugins/layer/laydate/laydate.js"></script>
<script type="text/javascript">
        //外部js调用
        laydate({
            elem: '#hello', 
            //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });

        //日期范围限制
        var start = {
            elem: '#start',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(), //设定最小日期为当前日期
            max: '2099-06-16 23:59:59', //最大日期
            istime: true,
            istoday: false,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY/MM/DD hh:mm:ss',
            min: laydate.now(),
            max: '2099-06-16 23:59:59',
            istime: true,
            istoday: false,
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
    </script>

</body>
</html>
